<template>
  <div class="map" id="map" style="height: 100%; background-color: #f7f7f7;"></div>
</template>

<script>
import mapMarker from './mapMarker'
export default {
  mixins: [mapMarker],
  data() {
    return {
      overlays: [],
      chartStyleOptions: {
        strokeColor: '#1890FF', // 边线颜色。
        fillColor: '#1890FF', // 填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 2, // 边线的宽度，以像素为单位。
        strokeOpacity: 0.8, // 边线透明度，取值范围0 - 1。
        fillOpacity: 0.3, // 填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' // 边线的样式，solid或dashed
      }
    }
  },
  methods: {
    onEdit(obj) {
      let point = []
      let chartObjet = null
      let chartVOList = obj.chartVOList

      for (let i = 0, len = chartVOList.length; i < len; i++) {
        point.push(new BMap.Point(chartVOList[i].longtitude, chartVOList[i].latitude))
      }

      if (chartVOList.length > 1) {
        // 多边形
        chartObjet = new BMap.Polygon(point, this.chartStyleOptions)
      } else {
        // 圆形
        chartObjet = new BMap.Circle(point[0], chartVOList[0].radius, this.chartStyleOptions)
      }
      this.overlays = [chartObjet]
      this.map.addOverlay(chartObjet)
      this.map.panTo(point[0])
    },
    clearAll() {
      for (var i = 0; i < this.overlays.length; i++) {
        this.map.removeOverlay(this.overlays[i])
      }
      this.overlays.length = 0
    },
    removeOverlay() {
      if (this.map != null) {
        this.map.clearOverlays()
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/span.BMap_Marker {
  img {
    display: none !important;
  }
}
</style>
